import 'package:flutter/material.dart';
import '../../model/chatMessageModel.dart';
import '../../provider/chatdetailprovider.dart';

class ChatdetailMessagesUi extends StatefulWidget {
  ChatdetailMessagesUi({Key? key, required this.chatDetailProvider})
      : super(key: key);
  ChatDetailProvider chatDetailProvider;

  @override
  _ChatdetailMessagesUiState createState() => _ChatdetailMessagesUiState();
}

class _ChatdetailMessagesUiState extends State<ChatdetailMessagesUi> {
  List<ChatMessage> messages = [
    ChatMessage(messageContent: "Hello, Will", messageType: "receiver"),
    ChatMessage(messageContent: "How have you been?", messageType: "receiver"),
    ChatMessage(
        messageContent: "Hey Kriss, I am doing fine dude. wbu?",
        messageType: "sender"),
    ChatMessage(messageContent: "ehhhh, doing OK.", messageType: "receiver"),
    ChatMessage(
        messageContent: "Is there any thing wrong?", messageType: "sender"),
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    widget.chatDetailProvider.addListener(() {

      if(!mounted)
        return;

      setState(() {
        messages = widget.chatDetailProvider.messages;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: widget.chatDetailProvider.messages.length,
      shrinkWrap: true,
      padding: EdgeInsets.only(top: 10, bottom: 10),
      physics: NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return Container(
          padding: EdgeInsets.only(left: 14, right: 14, top: 10, bottom: 10),
          child: Align(
            alignment: (widget.chatDetailProvider.messages[index].messageType ==
                    "receiver"
                ? Alignment.topLeft
                : Alignment.topRight),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: (messages[index].messageType == "receiver"
                    ? Colors.grey.shade200
                    : Colors.blue[200]),
              ),
              padding: EdgeInsets.all(16),
              child: Text(
                widget.chatDetailProvider.messages[index].messageContent,
                style: TextStyle(fontSize: 15),
              ),
            ),
          ),
        );
      },
    );
  }
}
